iT邦幫忙

2024 iThome 鐵人賽

DAY 20
1
JavaScript

可愛又迷人的 Web API系列 第 20

Day20. 用 Web Speech API 與你的 AI 朋友互動聊天

  • 分享至 

  • xImage
  •  

Web Speech API 的第三篇,也是最後一篇。

我想要結合 openAI API 以及前面兩篇的 SpeechRecognition 和 SpeechSynthesis,做出一個陪我聊天的 AI 好朋友 XDD,讓我們來一步一步打造吧!

實做一個 AI 好朋友

要將 Web Speech API 與 OpenAI API 結合,實現語音互動聊天,我們簡易的步驟如下:

  1. 將使用者說的話轉成文字
  2. 使用該文字作為 OpenAI API 的請求
  3. 接收回應後,再將回應轉換為語音。

HTML 的部分非常簡單,同樣考量安全限制,使用者必須點選按鈕才可以開始說話:

<button id="talkButton">說話</button>
<p id="response">等待語音輸入...</p>

JavaScript 這邊,寫完之後發現很難拆解,所以我將全部程式碼放上來,大家可以參考註解:

let voices = []
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
const utterance = new SpeechSynthesisUtterance();
const apiKey = '你的 API key';

recognition.lang = 'zh-TW';
utterance.lang = 'zh-TW';

// 透過 onvoiceschanged 取得 voices 列表
window.speechSynthesis.onvoiceschanged = function () {
  voices = window.speechSynthesis.getVoices();
};

document.getElementById('talkButton').addEventListener('click', function () {
  recognition.start();
});

recognition.onresult = async function (event) {
  const command = event.results[0][0].transcript;
  document.getElementById('response').textContent = '你說的話: ' + command;

  // 呼叫 OpenAI API
  const openAIResponse = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: 'gpt-4o',
      messages: [{
        'role': 'system',
        // 這邊可以修改成你希望 AI 扮演的角色
        'content': "你是一個很好的談心事的朋友,請以溫暖且堅定的口氣對話。"
      }, {
        'role': 'user',
        'content': command
      }],
      max_tokens: 300
    })
  });

  const data = await openAIResponse.json();
  const aiResponse = data.choices[0].message.content;

  // 更新網頁顯示
  document.getElementById('response').textContent = 'AI 回應: ' + aiResponse;

  // 使用 SpeechSynthesis 播放 AI 的回應
  utterance.text = aiResponse;
  utterance.voice = voices.filter(voice => voice.lang === 'zh-TW')[1];
  window.speechSynthesis.speak(utterance);
};

recognition.onerror = function (event) {
  console.error('語音識別錯誤:', event.error);
};

這些都是前面兩篇有提過的流程,所以實作起來並不困難,難的反而是要怎麼設定 OpenAI 的角色,才能讓他如我所願地成為我的 AI 好朋友 XD。

或者也可以當個吐槽好朋友:

messages: [{
  'role': 'system',
  'content': "你熱愛吐槽,對我說的話總是能雞蛋裡挑骨頭,找出許多負面的東西,但同時你又是我非常好的朋友,請帶著毒舌卻帶有一絲溫暖的對話。"
}, {
  'role': 'user',
  'content': command
}],

當我跟他說今天心情不好時,這是他回我的 XD:

哦,別告訴我你又在為那些微不足道的事煩惱了。拜託,你要不要先理理頭髮,那亂糟糟的樣子就像你的心情一樣。不過話說回來,我還是關心你的,畢竟我也不想每天跟一個情緒失控的朋友打交道。說吧,到底是什麼事,讓我幫你吐槽一下,說不定會讓你心情好點。

完蛋了,我怎麼覺得吐槽好朋友比較真實 😂。

有興趣的朋友可以自己修改 content 玩玩看,期待大家打造出來的 AI 朋友唷。

範例程式碼

範例程式碼:https://mukiwu.github.io/web-api-demo/speech2.html

小結

以上,有任何問題都歡迎留言討論


上一篇
Day19. 使用 Web Speech API 讓網頁開口說話
下一篇
Day21. 如何使用 MutationObserver API 追蹤 DOM 的變化 I
系列文
可愛又迷人的 Web API31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言